<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="sid" label="#" width="180" />
    <el-table-column prop="trainno" label="车次" width="180" />
    <el-table-column prop="fromnm" label="当前站点" />
    <el-table-column prop="tonm" label="下一站" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>

        <el-popconfirm
          width="320"
          confirm-button-text="OK"
          cancel-button-text="No, Thanks"
          :icon="InfoFilled"
          icon-color="#626AEF"
          :title="'确定删除运行阶段： ' + scope.row.fromnm + '到' + scope.row.tonm + ' 吗?'"
          @confirm="handleDelete(scope.$index, scope.row)"
        >
          <template #reference>
            <el-button size="small" type="danger">Delete</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { InfoFilled } from '@element-plus/icons-vue'
import { useScheduleStore } from '../../stores/schedule'
import { storeToRefs } from 'pinia'
const scheduleStore = useScheduleStore()
const { tableData } = storeToRefs(scheduleStore)

scheduleStore.loadall()
const handleEdit = (index, row) => {
  scheduleStore.preInfo4Mdd(index, row)
}
const handleDelete = (index, row) => {
  scheduleStore.delSchedule(index, row)
}
</script>
